<%--
  Created by IntelliJ IDEA.
  User: ykq
  Date: 2023/7/21
  Time: 16:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>员工管理</title>
    <%--引入vue的js--%>
    <script type="text/javascript" src="/js/vue.js"></script>
    <%--引入elementui的js--%>
    <script type="text/javascript" src="/js/index.js"></script>
    <%--引入axios的js 发送异步请求--%>
    <script type="text/javascript" src="/js/axios.min.js"></script>
    <%--引入elementui的css--%>
    <link type="text/css" rel="stylesheet" href="/css/index.css">
</head>
<body>
   <div id="app">
       <el-form :inline="true" :model="staffForm" class="demo-form-inline">
           <el-form-item label="编号">
               <el-input v-model="staffForm.staffId" placeholder="请输入员工编号"></el-input>
           </el-form-item>
           <el-form-item label="姓名">
               <el-input v-model="staffForm.staffName" placeholder="请输入员工姓名"></el-input>
           </el-form-item>
           <el-form-item label="选择分店">
               <el-select v-model="staffForm.branchId" placeholder="选择分店">
                   <el-option v-for="b in branchs" :label="b.branchname" :value="b.branchid"></el-option>
               </el-select>
           </el-form-item>
           <el-form-item>
               <el-button type="primary" @click="search">搜索</el-button>
           </el-form-item>
       </el-form>
       <el-table
               :data="tableData"
               border
               style="width: 100%">
           <el-table-column
                   prop="staffid"
                   label="工号"
                   >
           </el-table-column>
           <el-table-column
                   prop="staffname"
                   label="姓名"
                   >
           </el-table-column>
           <el-table-column
                   prop="idcard"
                   label="身份证号码"
                   width="200"
           >
           </el-table-column>
           <el-table-column
                   prop="address"
                   label="地址">
           </el-table-column>
           <el-table-column
                   prop="phone"
                   label="电话号码"
                   width="130"
           >
           </el-table-column>
           <el-table-column
                   prop="entrytime"
                   label="入职日期"
                   width="120"
           >
           </el-table-column>
           <el-table-column
                   prop="branch.branchname"
                   label="店名"
                   width="150"
           >
           </el-table-column>
           <el-table-column
                   prop="role.rolename"
                   label="职位名称"
           >
           </el-table-column>
           <el-table-column
                   prop="dept.deptname"
                   label="部门名称"
           >
           </el-table-column>
           <el-table-column
                   prop="role.remark"
                   label="职位描述"
           >
           </el-table-column>
           <el-table-column
                   prop="state"
                   label="状态"
           >
               <template slot-scope="scope">
                   <el-tag
                           :type="scope.row.state==1?'success':scope.row.state==0?'danger':'warning'"
                           effect="dark">
                       {{ scope.row.state==1?"工作状态":scope.row.state==0?"离职状态":"冻结状态" }}
                   </el-tag>
               </template>
           </el-table-column>
           <el-table-column
                   fixed="right"
                   label="操作"
                   width="300"
                   >
               <template slot-scope="scope">
                   <el-button type="primary" size="small">编辑</el-button>
                   <el-button type="primary" size="small">调动</el-button>
                   <el-button type="primary" size="small">离职</el-button>
                   <el-button type="primary" size="small">冻结</el-button>
               </template>
           </el-table-column>
       </el-table>
       <el-pagination
               @size-change="handleSizeChange"
               @current-change="handleCurrentChange"
               :current-page="currentPage"
               :page-sizes="[5, 10, 15, 20]"
               :page-size="pageSize"
               layout="total, sizes, prev, pager, next, jumper"
               :total="total">
       </el-pagination>
   </div>
</body>
<script>
     let app=new Vue({
          el:"#app",
          data:{
              //员工搜索表单对象
              staffForm:{},
              //员工的表格数据对象
              tableData:[],
              //当前页码
              currentPage:1,
              //每页的条数
              pageSize:5,
              //总条数
              total:0,
              //所有店铺对象
              branchs:[],
          },
          //页面加载完毕后执行该方法
          created(){
               this.initTable();
               //加载店面信息
              this.initBranch();
          },
          methods:{
              //搜索按钮事件
              search(){
                 this.currentPage=1;
                 this.initTable();
              },
              //初始化店铺信息
              initBranch(){
                  axios.get("/branch/listById").then(result=>{
                     this.branchs=result.data.data;
                  })
              },
               //初始化表格数据
              initTable(){
                  axios.post("/staff/list?currentPage="+this.currentPage+"&pageSize="+this.pageSize,this.staffForm).then(result=>{
                       this.tableData=result.data.data.list;
                       this.total=result.data.data.total;
                  })
              },
              //页面大小发生改变时触发的方法
              handleSizeChange(val) {
                  this.pageSize=val;
                  this.initTable();
              },
              //当页码改变时触发的方法
              handleCurrentChange(val) {
                  this.currentPage=val;
                  this.initTable();//
              }
          }
     })
</script>
</html>
